import React, { useState, useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEdit, faTrash, faTimes } from '@fortawesome/free-solid-svg-icons'
import { faMarkdown } from '@fortawesome/free-brands-svg-icons'
import PropTypes from 'prop-types'
import useKeyPress from '../hooks/userKeyPress'
import useContextMenu from '../hooks/useContextMenu'
import { getParentNode } from '../utils/helper'

// node.js modules
const { remote } = window.require('electron')
const { Menu, MenuItem } = remote

const FileList = ({ files, onFileClick, onSaveEdit, onFileDelete})=>{
    const [ editStatus, setEditStatus ] = useState(false)
    const [ value, setValue ] = useState('')
    const enterPressed = useKeyPress(13)
    const escPressed = useKeyPress(27)
    
    const closeSearch = (editItem) => {
      setEditStatus(false)
      setValue('')
      if(editItem.isNew){
        onFileDelete(editItem.id)
      }
    }

    const clickedItem = useContextMenu([
      {
        label: '打开',
        click: () => {
          const parentElement = getParentNode(clickedItem.current, 'file-item')
          if (parentElement) {
            onFileClick(parentElement.dataset.id)
          }
        }
      },
      {
        label: '重命名',
        click: () => {
          const parentElement = getParentNode(clickedItem.current, 'file-item')
          if (parentElement) {
            const { id, title } = parentElement.dataset
            setEditStatus(id)
            setValue(title)
          }
        }
      },
      {
        label: '删除',
        click: () => {
          const parentElement = getParentNode(clickedItem.current, 'file-item')
          if (parentElement) {
            onFileDelete(parentElement.dataset.id)
          }
        }
      },
    ], '.file-list', [files])

    useEffect(() => {
      const editItem = files.find(file => file.id === editStatus)
      if(enterPressed && editStatus && value.trim() !== ''){
        onSaveEdit(editItem.id, value, editItem.isNew)
        setEditStatus(false)
        setValue('')
      }
      if(escPressed && editStatus){
        closeSearch(editItem)
      }
    })
    useEffect(() => {
      const newFile = files.find(file => file.isNew)
      if(newFile){
        setEditStatus(newFile.id)
        setValue(newFile.title)
      }
    }, [files])
    return (
        <ul className="list-group list-group-flush file-list">
            {
              files.map(file => (
                <li
                    className="row no-gutters list-group-item bg-light row d-flex align-items-center file-item mx-0"
                    key={file.id}
                    data-id={file.id}
                    data-title={file.title}
                >
                  { (file.id !== editStatus && !file.isNew) &&
                    <>
                      <span className="col-2">
                          <FontAwesomeIcon
                              size="lg"
                              icon={faMarkdown} />
                      </span>
                      <span onClick={()=>{onFileClick(file.id)}} className="c-link col-8">
                          {file.title}
                      </span>
                      <button 
                          type="button"
                          onClick={()=>{setEditStatus(file.id); setValue(file.title);}}
                          className="icon-button col-1">
                          <FontAwesomeIcon 
                              title="编辑"
                              icon={faEdit} />
                      </button>
                      <button 
                          type="button"
                          onClick={()=>{onFileDelete(file.id)}}
                          className="icon-button col-1">
                          <FontAwesomeIcon 
                              title="删除"
                              icon={faTrash} />
                      </button>
                    </>
                  }
                  {
                    (file.id === editStatus || file.isNew) &&
                    <>
                      <input
                        onChange={(e)=>{setValue(e.target.value)}} 
                        className="form-control file-input col-10"
                        placeholder="请输入文件名称"
                        value={value} />
                      <button 
                        type="button"
                        onClick={() => {closeSearch(file)}}
                        className="icon-button col-2">
                          <FontAwesomeIcon 
                            title="关闭"
                            size="lg"
                            icon={faTimes} />
                      </button> 
                    </>
                  }
                </li>
              ))
            }
        </ul>
    )
}

FileList.propTypes = {
  files: PropTypes.array,
  onFileClick: PropTypes.func,
  onFileDelete: PropTypes.func,
  onSaveEdit: PropTypes.func
}

export default FileList